import {
  Form,
  FormItem,
  Input,
  InputNumber,
  Radio,
  RadioGroup,
  RangePicker
} from 'ant-design-vue'
import { defineComponent, onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'

import { orderApi } from '@/apis'
import { ActivityItem } from '@/apis/orderTypes'

import { brandIdOptions } from '../../constants'

export default defineComponent({
  name: 'InitializeLimit',
  setup() {
    const route = useRoute()
    const activityData = ref({} as ActivityItem)

    const rulesRef = ref({
      activityName: [
        {
          required: true,
          message: '请输入活动名称'
        }
      ],
      activityType: [
        {
          required: true,
          message: '请选择活动类型'
        }
      ],
      brandId: [
        {
          required: true,
          message: '请选择供应商'
        }
      ],
      peopleType: [
        {
          required: true,
          message: '请选择适用人群'
        }
      ],
      status: [
        {
          required: true,
          message: '请选择状态'
        }
      ]
    } as FormRules)

    onMounted(() => {
      if (route.query.id) {
        getDetail()
      }
    })

    async function getDetail() {
      try {
        activityData.value = await orderApi.getActivityDetail(route.query.id)
      } finally {
      }
    }

    return {
      activityData,
      rulesRef
    }
  },
  render() {
    return (
      <div>
        <h3 style={{ marginLeft: '30px' }}>{'新增限时活动'}</h3>
        <Form labelCol={{ span: 2 }}>
          <FormItem label="活动名称：" rules={this.rulesRef.activityName}>
            <Input
              maxlength={60}
              v-model:value={this.activityData.activityName}
              placeholder="请输入"
              style={{ width: '300px' }}
              disabled={true}
            />
          </FormItem>
          <FormItem label="活动类型：" rules={this.rulesRef.activityType}>
            <Radio checked={true} disabled={true}>
              商品价格初始化模板
            </Radio>
          </FormItem>
          <FormItem label="活动期限：">
            <RangePicker
              v-model:value={[
                this.activityData.activityStartTime,
                this.activityData.activityEndTime
              ]}
              format={'YYYY-MM-DD HH:mm:ss'}
              separator={'至'}
              style={{ width: '400px' }}
              disabled={true}
            />
          </FormItem>
          <FormItem label="商品供应商：" rules={this.rulesRef.brandId}>
            <RadioGroup v-model={this.activityData.brandId} disabled={true}>
              {brandIdOptions.map(val => (
                <Radio value={val.value}>{val.label}</Radio>
              ))}
            </RadioGroup>
          </FormItem>
          <FormItem label="活动区域：">
            <Input
              v-model:value={'全国'}
              style={{ width: '300px' }}
              disabled={true}
            />
          </FormItem>
          <FormItem label="活动门店：">
            <Radio checked={true} disabled={true}>
              全部门店
            </Radio>
          </FormItem>
          <FormItem label="适用人群：" rules={this.rulesRef.peopleType}>
            <Radio checked={true} disabled={true}>
              无限制
            </Radio>
          </FormItem>
          <FormItem label="支付设置：">
            <h4>现金部分：商品售价</h4>
            <h4>金豆部分：产品官方价-商品售价</h4>
          </FormItem>
          <FormItem label="权重：">
            <InputNumber
              v-model:value={'0'}
              style={{ width: '300px' }}
              disabled={true}
            />
          </FormItem>
          <FormItem label="状态：" rules={this.rulesRef.status}>
            <Radio checked={true}>启用</Radio>
          </FormItem>
        </Form>
      </div>
    )
  }
})
